import { MessageBoxService, GrowlMessageType } from './../../components/messageBox';
import { AppStore } from './../../services/appStore';
import { KdsMessageType, FNCManager } from './../../utils/fnc/fncManager';
import { Order, OrderExtended, Orderitem } from './../../models/order';
import { OrderBy } from './../../utils/pipes/date';
import { OrderSvr, OrderPriority } from './../../services/order';
import { Component, Input, Inject, ElementRef, ChangeDetectorRef } from '@angular/core';
import { formatTime } from "./../../utils/index";
// import {KitchenOrder} from '../models/order';

@Component({
    selector: 'finishedorder-panel',
    template: `
     <section class="finishedorder-panel-container">
        <header class="layout-row layout-align-center-center header" >
            <span class='terminal-name'>{{order.customerIdentity}}</span>
            <span class="flex"></span>
            <span class="new">
                <span class="info">新</span><span class="triangle-down"></span>
            </span>
            <i class="iconfont icon-time"></i>
            <span class='elasped-time'>{{formatTime(order.finishTime)}}</span>
        </header>
        <article [id]="'order-'+order.id">
            <div class='cart-item bgw' *ngFor="let item of order.items"  [class.no-localstall]='!item.isLocalStall'  [hidden]="!isExpand && !item.isLocalStall" [class.completed]='item.finishTime>0' [class.refund]='item.qty == item.refundQty'>
                <div class="item-info layout-row layout-center" >
                    <div class="container layout-row layout-center flex">
                        <span class='item-qty' [class.multiple]='calcRealQty(item)>1'>{{calcRealQty(item)}}</span>
                        <div class='invt-name '>
                            <span>{{item.inventoryName}}</span>
                        </div>
                    </div>
                    <i class="iconfont  icon-done-circle done"></i>
                </div>
                <div class="modifier"  *ngIf="item.description || (item.modifiers&&item.modifiers&&item.modifiers.length)">
                    <span *ngFor="let option of flatOptions(item.modifiers)" class='modifier-option'>{{option.name}}</span>
                    <span class='modifier-option' *ngIf="item.description">{{item.description}}</span>
                </div>
            </div>
        </article>
        <footer>
            <div class="remark" *ngIf="order.description">备注 : <span class='order-remark'>{{order.description}}</span></div>
            <div class="btn layout-row "  >
                <button (click)="toggleExpand()" class="border-r expand  w layout-row layout-align-center-center">
                   <i class="iconfont  icon-assignment" [class.active]='isExpand'></i>
                </button>
                <button class="dn  up w border-r direction" (click)="up()"><i class="iconfont icon-expand-less"></i></button>
                <button class="dn  down w border-r direction" (click)="down()"><i class="iconfont icon-expand-more"></i></button>
                <button class="flex text disable">
                    恢复制作
                </button>
            </div>
        </footer>
     </section>
    `,
    styleUrls: ['./index.scss'],
    providers: []
})
export class finishedOrderPanel {
    constructor(private element: ElementRef, private appStore: AppStore, private changeDetectorRef: ChangeDetectorRef) {
    }
    private _order: Order;
    private isExpand: Boolean = true;
    // private deliverTime: Number;
    @Input()
    set order(order: Order) {
        this._order = order;
    }
    get order() {
        return this._order;
    }
    private canAllFinish() {
        return this.order.items && this.order.items.every(x => Boolean(x.finishTime))
    }
    private isScorllHeight(ele) {
        return ele.scrollHeight > ele.clientHeight;
    }
    private toggleExpand() {
        this.isExpand = !this.isExpand;
        const section = this.element.nativeElement.firstElementChild;
        const ele = section.children[1];
        setTimeout(function () {
            if (this.isScorllHeight(ele)) {
                section.classList.add("scorll");
            } else {
                section.classList.remove("scorll");
            }
        }.bind(this), 1);
    }
    private calcRealQty(item) {
        const qty = (item.qty > item.refundQty) ? item.qty - item.refundQty : item.qty;
        return qty;
    }
    private flatOptions(modifiers) {
        if (modifiers.length == 0) return [];
        return modifiers.map(x => x.options).reduce((x, y) => x.concat(y))
    }
    private canFinish() {
        return this.order.items && this.order.items.every(x => !x.isLocalStall || Boolean(x.finishTime))
    }
    private async completeOrder() {
        this.appStore.orderStore.actions.completeOrder(this.order.id);
    }
    private formatTime(time) {
        return formatTime(time, "{hour}:{minute}")
    }
    private up() {
        const article = this.element.nativeElement.firstElementChild.children[1];
        article.scrollTop -= article.clientHeight;
    }
    private down() {
        const article = this.element.nativeElement.firstElementChild.children[1];
        article.scrollTop += article.clientHeight;
    }
    private ngAfterViewInit() {
        // setTimeout(function () {
        //     this.isExpand = this.appStore.orderStore.actions.getOrderExpansion(this.order.id)
        // }.bind(this), 1);

        const self = this;
        const section = this.element.nativeElement.firstElementChild;
        const ele = section.children[1];
        this.element.nativeElement.style.opacity = "100";
        this.changeDetectorRef.detectChanges();
        if (self.isScorllHeight(ele)) {
            section.classList.add("scorll");
        }

    }

    private ngOnInit() {
        // this.deliverTime = Math.max(...this.order.items.filter(x=>x.qty!=x.refundQty).filter(x => x.isLocalStall).map(x => x.deliverTime))
    }
}
